import { useState, useEffect } from "react";
import { TabBar } from "antd-mobile";
import "./index.css";
import today from "../../assets/img/tab_today_normal.png";
import today1 from "../../assets/img/tab_today_selected.png";
import explore from "../../assets/img/tab_explore_normal.png";
import explore1 from "../../assets/img/tab_explore_selected.png";
import mine from "../../assets/img/tab_mine_normal.png";
import mine1 from "../../assets/img/tab_mine_selected.png";
import { useNavigate, useLocation } from "react-router-dom";
export default function FootTab() {
  const location = useLocation();
  console.log("location数据", location);

  const tabs = [
    {
      key: "/today",
      title: "今日",
      icon: (active: boolean) => {
        return (
          <img src={active ? today1 : today} className="tab-icon" alt="" />
        );
      },
    },
    {
      key: "/explore",
      title: "探索",
      icon: (active: boolean) => {
        return (
          <img src={active ? explore1 : explore} className="tab-icon" alt="" />
        );
      },
    },
    {
      key: "/mine",
      title: "我的",
      icon: (active: boolean) => {
        return <img src={active ? mine1 : mine} className="tab-icon" alt="" />;
      },
    },
  ];

  const [activeKey, setActiveKey] = useState("");
  const navigate = useNavigate(); //编程式导航方法
  const handleTab = (key: string) => {
    console.log(key);
    navigate(key);
  };
  useEffect(() => {
    // console.log("路由变了");
    setActiveKey(location.pathname);
  }, [location.pathname]);
  return (
    <>
      <TabBar className="tab-cont" onChange={handleTab} activeKey={activeKey}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  );
}
